<template>
  <div class="Root">
    <div>
        <van-nav-bar title="HOME" fixed>
      <template #right>
        <van-icon name="search" color="pink" size="0.48rem" @click="$router.push('/search')" />
      </template>
      <template #left>
        <img src="@/assets/logo.png" alt="" class="logo" />
      </template> 
    </van-nav-bar>
    </div>
      <!-- v-model 会绑定当前点击的东西 ,如果下面有那么 就会关联name属性 -->
    <div class="main">
      
        <van-tabs sticky offset-top="1.226667rem" v-model="channelId" @change="changeChannel">
      <van-tab v-for="item in channelList" :title="item.name" :key="item.id" :name="item.id">
        <ArticleList :channelId="channelId"></ArticleList>
    
      </van-tab>
    </van-tabs>
    <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn"/>
    </div>
    <van-popup v-model="show" class="channel_popup"><ChannelEdit @close="this.show=false" :userlist="channelList" :unlist="unChannelList"  @addChannelEV="addChannelEVfn" @removeChannelEV="removeChannel" @closeEV="closetap" @changeChannelEV="channgeChannelFn"></ChannelEdit></van-popup>
  </div>
</template>

<script>
import {getUserChannesAPI,getAllchannesAPI,updateChannelAPI,removeChannelAPI} from '@/api/index'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './components/channelEdit.vue'
export default {
    
  name: "",
  components: {
    ArticleList,
    ChannelEdit
  },
  props: {},
  data() {
    return {
      channelList:[],
      articleList:[],
      allChannelList:[],
      channelId:0,
      show:false
      
    };
  },
  watch: {},
  computed: {
    unChannelList () {
      return this.allChannelList.filter(obj => {
        const index = this.channelList.findIndex(obj2 => obj2.id === obj.id)
        if (index === -1) {return true}
      })
    }
  },
  methods: {
    //每次切换的事件
    async changeChannel(){
      
    },
    plusClickFn(){
      this.show = true
    },
   async addChannelEVfn(item){
      this.channelList.push(item);
      const arr = this.channelList.filter((obj)=>{return obj.id !== 0})
      console.log(arr);
      const resultList = arr.map((item, index) => {
        const newObj = { ...item } // 浅拷贝(让对象和原数组脱离关系)
        newObj.seq = index + 1
        delete newObj.name // 删除对象里name键值对
        return newObj
    })
    // map会收集每次遍历return的值形成一个新数组
    console.log(resultList)
    await updateChannelAPI({
        channels: resultList
    })

    },
    //删除
    async removeChannel(obj){
      console.log(obj);
      
      const ind = this.channelList.findIndex(item => item.id === obj.id)
      this.channelList.splice(ind, 1)
      // this.addChannelEVfn()
      let res = await removeChannelAPI({channelID:obj.id})
      console.log(res);
    },
    closetap(){
      this.show =false
    },
    channgeChannelFn(obj){
      this.channelId = obj.id
    }
  },
  // 路由离开 - 触发(保存滚动位置)
beforeRouteLeave (to, from, next) {
    from.meta.top = window.scrollY
    next()
}
  ,
  async created() {
    let {data} = await getUserChannesAPI();
    this.channelList = data.data.channels;
    console.log(this.channelList)
    //获取文章列表

    let data2 = await getAllchannesAPI();
   
    this.allChannelList = data2.data.data.channels
    console.log(this.allChannelList);
      
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.logo {
  height: 30px;
  width: 30px;
}
.main{
    padding-top:46px;
    height: 200px;
}

// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup{
  height: 100vh;
  width: 100vw;
}
</style>